@extends('admin.base')

@section('content')
    <style type="text/css">
        .layui-fluid{padding:0;}
        .search{position: fixed;top:20px;left:30px;z-index:9;}
        #allmap {width: 100%;height: 100vh;overflow: hidden;margin:0;padding:0;font-family:"微软雅黑";position: relative;z-index: 6;}
    </style>
    <div class="search">
        <div class="layui-input-inline">
            <input type="text" style="width:300px;margin-right:10px;" id="keyword" placeholder="输入地址搜索，或移动标注位置" autocomplete="off" class="layui-input">
        </div>
        <input type="hidden" id="city" value="{{$city}}">
        <input type="hidden" id="location" value="">
        <button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
        <button type="button" class="layui-btn layui-btn-danger" id="submit">确定</button>
    </div>
    <div id="allmap"></div>
@endsection

@section('script')
{{--    @include('admin.property._js')--}}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2pOLT55iaTI8LVvPfirAgUDqaZa0sdnj"></script>
<script type="text/javascript">
    var city = $("#city").val()
    var cityname = $("#city").val()
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    // var point = new BMap.Point(116.331398,39.897445);
    // map.centerAndZoom(point,12);
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野

    function initMapData(city) {
        myGeo.getPoint(city, function(point){
            if (point) {
                document.getElementById("location").value = point.lng+','+point.lat
                map.centerAndZoom(point, 16);
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                map.enableScrollWheelZoom();
                marker.enableDragging();
                marker.addEventListener('dragend',getMarkerPoints)
            }else{
                alert("您选择地址没有解析到结果!请拖动标注手动选择。");
            }
        }, cityname);
    }

    $(document).ready(function(){
        initMapData(city)
    });

    function getMarkerPoints(e) {
        var event = e.target,lng = event.getPosition().lng,lat = event.getPosition().lat;
        document.getElementById("location").value = lng+','+lat;
    }

    $("#search").click(function () {
        var newCity = $("#keyword").val()
        initMapData(newCity)
    })

    $("#submit").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        var location = $("#location").val()
        var parentFrame = $(window.parent.document);
        parentFrame.find('#map').val(location);
        parentFrame = $(window.parent.document).find('iframe').get(0);
        $(parentFrame).contents().find("#map").val(location);
        parent.layer.close(index);
    })
</script>
@endsection
